<template>
    <div class="header_ref">
        <div class="school-wrap">
            <el-select v-model="schoolId" @change="schoolChange" placeholder="请选择校区">
                <el-option v-for="item in schools" :key="item.id" :label="item.schoolName" :value="item.id"></el-option>
            </el-select>
        </div>
        <div class="search">
            <el-input clearable placeholder="按姓名/账号搜索" prefix-icon="el-icon-search" v-model="searchText"
                      @keydown.enter="searchHandle"/>
        </div>
        <div class="new-member">
            <el-button round @click="newAdd">开卡</el-button>
        </div>
    </div>
</template>
<script lang="ts">
    import {ref, watch} from 'vue';

    export default {
        props: {
            schools: Array,
            storeId: String
        },
        setup(props, {emit}) {
            let searchText = ref('');
            let schoolId = ref('');

            watch(props, (val: string) => {
                schoolId.value = props.storeId
            }, {deep: true})

            const searchHandle = () => emit('searchHandle', {searchName: searchText.value});
            const schoolChange = () => emit('searchHandle', {schoolId: schoolId.value});
            const newAdd = () => {
                emit('editCard');
            };
            return {searchText, searchHandle, newAdd, schoolId, schoolChange}
        }
    }
</script>
<style lang="scss" scoped>
    .header_ref {
        display: flex;
        line-height: 60px;

        .search {
            margin-left: auto;

            :deep(.el-input__prefix),
            :deep(.el-input__suffix) {
                color: #fff !important;
            }

            :deep(input) {
                width: 240px;
                height: 36px;
                color: #fff;
                border: 0;
                border-radius: 18px;
                background: rgba(255, 255, 255, 0.3);

                &::placeholder {
                    color: #fff;
                }
            }
        }

        .new-member {
            margin-left: 30px;

            button {
                color: #72b22a;
                padding: 10px 23px;

                input {
                    display: none;
                }
            }
        }
    }
</style>
